<template>
  <div :style="{ marginTop: top }">
    <el-pagination
      :pager-count="pagerCount1"
      :small="paginationSize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page.sync="pageCurrent"
      :page-size="pageSize1"
      :layout="layout"
      :total="total1"
      :page-sizes="pageSize2"
      class="pagination"
      hide-on-single-page
    >
    </el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      pageCurrent: this.currentPage,
      pageSize1: this.pageSize,
      total1: this.total,
      paginationSize: false,
      pagerCount1: this.pagerCount,
      Is:1,
      // pagerCount: this.pagerCount
    };
  },
  created() {
    // if (this.$store.state.screenWidth <= 1024) {
    //   this.paginationSize = true;
    // } else {
    //   this.paginationSize = false;
    // }
    console.log(this.top);
  },
  mounted(){
    this.Is = this.$store.getters.getIsThis;
  },
  computed: {},
  methods: {
    handleCurrentChange(val) {
      // console.log("Isthis",this.Is)
       switch(this.Is){
        case 1: this.$store.commit("changeCurrentPage", val);break;
        case 2:this.$emit("handleCCurrentChange", val);break;
        case 3:this.$store.commit("changeJCurrentPage", val);break;
        case 4:this.$emit("changeCurrentPage",val);break;
      }
    },
    handleSizeChange(val) {
      // console.log("Isthis",this.Is)
      switch(this.Is){
        case 1:this.$store.commit("changePageSize", val);break;
        case 2:this.$emit("handleCSizeChange", val);break;
        case 3:this.$store.commit("changeJPageSize", val);break;
        case 4:this.$emit("changePageSize",val);break;
      }
    },
  },
  watch: {
    currentPage(val) {
      this.pageCurrent = val;
    },
    pageSize(val) {
      this.pageSize1 = val;
    },
    total(val) {
      this.total1 = val;
    },
    pagerCount(val) {
      this.pagerCount1 = val;
    },
  },
  components: {},
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    layout: {
      type: String,
      default: "total,sizes, prev, pager, next, jumper",
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    pageSize2: {
      type: Array,
      default: function () {
        return [10, 20, 30, 40, 50];
      },
    },
    total: {
      type: Number,
      default: 0,
    },
    pagerCount: {
      type: Number,
      default: 5,
    },
    top: {
      type: String,
      require: true,
    }
  },
};
</script>

<style scoped >
.pagination {
  z-index: 3;
  position: absolute;
  right: 0;
  width: 100%;
  text-align: right;
  background-color: #0f3b79;
  border-left: 1px solid #2a2b2d;
  border-right: 1px solid #2a2b2d;
  border-bottom: 1px solid #2a2b2d;
  border-bottom-left-radius: 0.1rem;
  border-bottom-right-radius: 0.1rem;
  box-shadow: 0 8px 5px 2px #40628f;
}
/deep/.el-pagination__total,
/deep/.el-pagination__jump {
  color: rgba(255, 255, 255, 0.7) !important;
}
/deep/.el-pagination button:disabled {
  background-color: transparent !important;
}
/deep/.el-input__inner {
  color: #409eff;
}
</style>
